<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="/dtpr/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="/dtpr/Flat-UI/css/flat-ui.min.css" rel="stylesheet" type="text/css">
    <link href="/dtpr/css/home.css" rel="stylesheet" type="text/css">
    <link href="/dtpr/css/class.css" rel="stylesheet" type="text/css">
    <script src="/dtpr/bootstrap/js/jquery-3.2.1.min.js"></script>
    <script src="/dtpr/js/home.js"></script>
    <title>班级管理</title>
</head>
<body>
<!--网页头-->
<script src="/dtpr/js/head.js"></script>
<!--网页体-->
<div class="main">
    <div class="container-fluid">
        <!--页面左侧导航-->
        <div class='col-xs-2'>
            <ul class='list-group'>
                <li class='list-group-item active' style='background: #14b1a0'>我的班级</li>
                <div id="class-select">
                </div>
                <!-- 新建班级 -->
                <button type='button' class='btn list-group-item btn-info' data-toggle='modal' data-target='#addClass'>
                    新建班级
                </button>
                <!--加入班级-->
                <button type='button' class='btn list-group-item btn-success' data-toggle='modal' data-target='#joinClass'>
                    加入班级
                </button>
            </ul>
            <!-- 新建班级Modal -->
            <div class='modal fade' id='addClass' tabindex='-1' role='dialog'>
                <div class='modal-dialog' role='document'>
                    <div class='modal-content'>
                        <div class='modal-header'>
                            <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
                            <h4 class='modal-title'>新建班级</h4>
                        </div>

                        <form class='form-horizontal' id="new-class" role='form' action="http://139.199.200.112/dtpr/index.php?exam-teach-basic-addclass">
                            <div class='modal-body'>
                                <div class='form-group'>
                                    <label for='create_group_name' class='col-sm-4 control-label'>班级名称</label>
                                    <div class='col-sm-6'>
                                        <input maxlength='50' type='text' class='form-control' id='create_group_name' name='name' placeholder='x年x班'>
                                    </div>
                                </div>
                                <div class='form-group'>
                                    <label for='member_count' class='col-sm-4 control-label'>学生人数</label>
                                    <div class='col-sm-6'>
                                        <input type='number' class='form-control' id='member_count' name='number' min='0' max='500'>
                                    </div>
                                </div>
                            </div>
                            <div class='modal-footer'>
                                <button type='button' class='btn btn-primary' onclick="addClass()">确定</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!--加入班级-->
            <div class='modal fade' id='joinClass' tabindex='-1' role='dialog'>
                <div class='modal-dialog' role='document'>
                    <div class='modal-content'>
                        <div class='modal-header'>
                            <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
                            <h4 class='modal-title'>新建班级</h4>
                        </div>

                        <form class='form-horizontal' role='form' id="join-class">
                            <div class='modal-body'>
                                <div class="form-group">
                                    <label class='col-sm-4 control-label'>班级ID</label>
                                    <div class='col-sm-6'>
                                        <input type="text" class="form-control" name="id">
                                    </div>
                                </div>
                            </div>
                            <div class='modal-footer'>
                                <button type='button' class='btn btn-primary' onclick="joinClass()">确定</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--网页正文-->
        <div class="col-xs-10" hidden>
            <!--班级操作-->
            <div class="container-fluid title">
                <!--内容-->
                <p class="text-center">
                    目前所选班级：<strong id="class-name"></strong>&nbsp;&nbsp;
                    <strong>ID:<span id="class-id"></span></strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="btn btn-default" data-toggle="modal" data-target="#change-class-name" style="border: none"><span class="glyphicon glyphicon-pencil"></span></button>
                    <button class="btn btn-default" data-toggle="modal" data-target="#del-class" style="border: none"><span class="glyphicon glyphicon-remove" style="color: red;"></span></button>
                </p>
                <!--modal-->
                <!--修改班级名称-->
                <div class="modal fade" id="change-class-name" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title">修改班级名称</h4>
                            </div>
                            <form class="form-horizontal" role="form">
                                <div class="modal-body">
                                    <div class="form-group">
                                        <label for="change-group-name" class="col-sm-4 control-label">修改班级名称</label>
                                        <div class="col-sm-6">
                                            <input maxlength="50" type="text" class="form-control" id="change-group-name" name="name">
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="editClassName()">确定</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!--删除班级-->
                <div class="modal fade" id="del-class" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title">删除班级</h4>
                            </div>
                            <div class="modal-body">
                                <div class="panel panel-default">
                                    <div class="panel-body" id="message">此操作将删除<br><br> 	1. 学生信息<br> 	2. 分组资料<br> 	3. 统计分析资料<br> 	4. 整个班级所有数据</div>
                                </div>
                                <div class="checkbox text-info">
                                    <label onclick="alDelete('removeClass()')">
                                        <input id="chkboxAllowDelete" type="checkbox">我已经充分了解后果，并同意删除
                                    </label>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger disabled" id="delButton" >确认删除</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--内容部-->
            <div class="container-fluid stu">
                <div class="row">
                    <div class="teacher">
                        <div class="col-sm-4 col-md-2 col-xs-6 member">
                            <div class="thumbnail btn btn-default">
                                <img src="/dtpr/images/picture.png" class="img-circle">
                                <div class="caption">
                                    老师
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--学生放置的位置-->
                <div class="row member-are" id="stu-members">
                    <div class="col-sm-4 col-md-2 col-xs-6 member" data-toggle="modal" data-target="#member">
                        <div class="thumbnail btn btn-default">
                            <img src="/dtpr/images/picture.png" class="img-circle">
                            <div class="caption">
                                学生一
                            </div>
                            <div class="account" hidden>123</div>
                            <div class="number" hidden>123</div>
                        </div>
                    </div>

                    <div class="col-sm-4 col-md-2 col-xs-6 member" data-toggle="modal" data-target="#member">
                        <div class="thumbnail btn btn-default">
                            <img src="/dtpr/images/picture.png" class="img-circle">
                            <div class="caption">
                                学生二
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4 col-md-2 col-xs-6 member" data-toggle="modal" data-target="#member">
                        <div class="thumbnail btn btn-default">
                            <img src="/dtpr/images/picture.png" class="img-circle">
                            <div class="caption">
                                学生三
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4 col-md-2 col-xs-6 member" data-toggle="modal" data-target="#member">
                        <div class="thumbnail btn btn-default">
                            <img src="/dtpr/images/picture.png" class="img-circle">
                            <div class="caption">
                                学生四
                            </div>
                        </div>
                    </div>
                </div>
                <!--modal 学生详细信息-->
                <div class="modal fade" id="member" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title text-center">老师</h4>
                            </div>
                            <form class="form-horizontal" role="form">
                                <div class="modal-body">
                                    <div class="form-group text-center">
                                        <img src="/dtpr/images/picture.png" height="100px">
                                    </div>
                                    <div class="form-group stu-name">
                                        <label class="col-sm-4 control-label">真实姓名</label>
                                        <div class="col-sm-6">

                                        </div>
                                    </div>
                                    <div class="form-group account">
                                        <label class="col-sm-4 control-label">账号</label>
                                        <div class="col-sm-6">

                                        </div>
                                    </div>
                                    <div class="form-group test-amount">
                                        <label class="col-sm-4 control-label">解题数</label>
                                        <div class="col-sm-6">
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary" data-dismiss="modal">确定</button>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--网页脚-->
<script src="/dtpr/js/foot.js"></script>
<script src="/dtpr/html/teacher/class/js/class.js"></script>
<script src="/dtpr/Flat-UI/js/flat-ui.min.js"></script>
</body>
</html>